<template>
    <!-- 政策项目数量图表 -->
    <div ref="chartContainer" style="width: 600px; height: 200px"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps<{
  timeData?: {
    threeDays: number
    sevenDays: number
    fifteenDays: number
    thirtyDays: number
  }
}>()

// 创建图表容器的引用
const chartContainer = ref<HTMLDivElement | null>(null)

onMounted(() => {
    if (chartContainer.value) {
        const myChart = echarts.init(chartContainer.value)

        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}' // 只显示名称，去掉数值和百分比
            },
            legend: {
                orient: 'vertical', // 垂直排列
                left: 'left', // 将图例放置在左侧
                top: 'center', // 图例垂直居中
                data: ['三天内', '七天内', '15天内', '30天内'], // 图例项，修改为“3星”
                selectedMode: 'multiple', // 允许多选（可以切换不同图例）
                formatter: (name: string) => {
                    const data = {
                        '三天内': props.timeData?.threeDays,
                        '七天内': props.timeData?.sevenDays,
                        '15天内': props.timeData?.fifteenDays, // 3星的值为0
                        '30天内': props.timeData?.thirtyDays // 3星的值为0
                    }
                    return `${name} ${data[name]}` // 在图例后面加上数值
                }
            },
            series: [
                {
                    name: '星级',
                    type: 'pie',
                    radius: ['50%', '70%'], // 定义环形的内外半径
                    avoidLabelOverlap: false,
                    label: {
                        show: false, // 不显示标签的数值
                        position: 'outside' // 标签显示在外侧
                    },
                    labelLine: {
                        show: true // 显示连接线
                    },
                    data: [
                      {value: props.timeData?.threeDays ?? 0, name: '三天内'},
                      {value: props.timeData?.sevenDays ?? 0, name: '七天内'},
                      {value: props.timeData?.fifteenDays ?? 0, name: '15天内'},
                      {value: props.timeData?.thirtyDays ?? 0, name: '30天内'}
                    ]
                }
            ],
            graphic: {
                elements: [
                    {
                        type: 'text',
                        left: 'center',
                        top: 'center',
                        style: {
                            text: '申报截至剩余时间', // 中间显示的文本
                            textAlign: 'center',
                            font: '12px Arial',
                            fill: '#333' // 设置字体颜色
                        }
                    },
                    {
                        type: 'text',
                        left: 'left', // 将文本定位到左侧
                        top: '15%', // 距离顶部10%的位置
                        style: {
                            text: '政策项目数量', // 在左侧图例上方显示
                            textAlign: 'center',
                            font: '12px Arial',
                            fill: '#333'
                        }
                    }
                ]
            }
        }

        // 使用指定的配置项和数据显示图表
        myChart.setOption(option)
    }
})
</script>

<style scoped>
/* 可选：为图表容器添加一些样式 */
#chartContainer {
    position: relative;
}
</style>
